<template>
  <div id="big">
    <div id="logo"></div>
    <div id="form">
      <input
        type="text"
        placeholder="搜点什么吧"
        v-model="gname"
        @keydown.enter="to"
      />
      <button id="search" @click="to">搜索</button>
    </div>
    <div id="right">
      <a id="release" style="text-decoration: none" @click="release"
        >我要发布</a
      >
      <a id="login" @click="cli">登录</a>
      <a href="/management" id="management" style="text-decoration: none"
        >后台管理</a
      >
    </div>
  </div>
</template>

<script>
import VueCookies from "vue-cookies";
import axios from "axios";
import router from "../router";

export default {
  props: ["point"],
  methods: {
    cli: function () {
      // 判断uid是否未空，如果不是空就已经登录
      this.uid = JSON.parse(VueCookies.get("uid"));
      if (this.uid) {
        alert("你已经登录！请勿再次登录");
        return;
      }
      this.$emit("setPoint");
    },
    release: function () {
      
      // 跳转到发布路由组件
      router.replace({
            name: "Release",
            // 当page页面需要tips信息去渲染，就传，前其他不用传tips
            params: {
              
            },
          });
    },
    to: function () {
      // 判断是否登录
      this.uid = JSON.parse(VueCookies.get("uid"));
      if (!this.uid) {
        alert("未登录，请先登录！");
        return false;
      } else {
        // 判断内容是否为空
        if(this.gname.trim()==''){
          alert("请填写搜索内容！")
          this.gname = ''; //如果只有空格就修改空
        }else{
          // 查询搜索内容
        axios({
          method: "POST",
          url: "http://localhost:8081/lo/intercept/goods/asguname",
          params: {
            uid: VueCookies.get("uid"),
            ucookie: VueCookies.get("ucookie"),
            gname: this.gname.trim(),
          },
          headers: {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          },
        }).then(
          (response) => {
            // console.log(response.data);
            // console.log(this.gname);

            // 更新APP组件的listdata
            this.$emit("setListData", response.data);
            this.gname = '';
            this.$emit("searchUpdata",response.data[0]);  // 更新detailed组件的数据
          },
          (error) => {
            alert("请求失败,请检查服务器是否开启！");
          }
        );
        }
        
      }
    },
  },
  data() {
    return {
      uid: "",
      gname: "",
    };
  },
};
</script>

<style scoped>
@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont.ttf") format("truetype");
}
* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#big {
  width: 100%;
  height: 70px;
  background-color: #fff;
  position: fixed;
  padding-top: 12px;
  top: -10px;
  z-index: 5;
}
#big #logo {
  display: inline-block;
  width: 30%;
  height: 70px;
  float: left;
  margin-left: 5%;
  background-image: url(../assets/logo.png);
  background-size: 80% 70px;
  background-repeat: no-repeat;
}
#form {
  display: inline-block;
  width: 30%;
  height: 70px;
  margin-left: 3%;
  float: left;
}
#form input {
  width: 50%;
  height: 38px;
  margin-top: 14px;
  font-size: 16px;
  border: 0px;
  padding-left: 10px;
  background-color: #eeeeee;
}
#form::before {
  content: "\e629";
  font-family: "iconfont";
  color: rgb(29, 190, 29);
  font-size: 32px;
  vertical-align: bottom; /*调整对齐线*/
}
#form #search {
  font-size: 18px;
  display: inline-block;
  width: 20%;
  height: 40px;
  margin-left: 5px;
  border: 0px;
  background-color: #0db9f8;
  cursor: pointer;
}
#right {
  width: 25%;
  height: 60px;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  margin-left: 3%;
}
#right #release {
  display: inline-block;
  margin-top: 12px;
  width: 37%;
  height: 40px;
  background-color: red;
  color: #fff;
  cursor: pointer;
}
#right #login {
  display: inline-block;
  width: 28%;
  height: 40px;
  margin-left: 5px;
  cursor: pointer;
  border: 1px solid #000;
  border-radius: 12px;
}
#right #login:hover,
#management:hover {
  background-color: #0db9f8;
}
#right #management {
  display: inline-block;
  width: 28%;
  height: 40px;
  margin-left: 5px;
  cursor: pointer;
  border: 1px solid #000;
  border-radius: 12px;
}
</style>